<div class="person-statistics">
  <mat-grid-list cols="2" rowHeight="80px">
    <mat-grid-tile>
      <button mat-raised-button matBadge="{{personTotal}}" matBadgePosition="after" matBadgeColor="primary" (click)="switchTable('allPerson')"><span [class]="allPersonClass">{{"totalPerson" | translate}}</span></button>
      <button mat-raised-button matBadge="{{personNormal}}" matBadgePosition="after" matBadgeColor="primary" (click)="switchTable('normalPerson')"><span [class]="normalPersonClass">{{"normalPerson" | translate}}</span></button>
      <button mat-raised-button matBadge="{{personAbnormal}}" matBadgePosition="after" matBadgeColor="warn" (click)="switchTable('abnormalPerson')"><span [class]="abnormalPersonClass">{{"abnormalPerson" | translate}}</span></button>
      <button mat-raised-button matBadge="{{personAway}}" matBadgePosition="after" matBadgeColor="warn" (click)="switchTable('awayPerson')"><span [class]="awayPersonClass">{{"leavePerson" | translate}}</span></button>
    </mat-grid-tile>

    <mat-grid-tile>
      <button mat-raised-button matBadge="{{deviceTotal}}" matBadgePosition="after" matBadgeColor="primary" (click)="switchTable('allDevice')"><span [class]="allDeviceClass">{{"totalDevice" | translate}}</span></button>
      <button mat-raised-button matBadge="{{deviceInUse}}" matBadgePosition="after" matBadgeColor="primary" (click)="switchTable('inUseDevice')"><span [class]="inUseDeviceClass">{{"inUseDevice" | translate}}</span></button>
      <button mat-raised-button matBadge="{{deviceToUse}}" matBadgePosition="after" matBadgeColor="primary" (click)="switchTable('toUseDevice')"><span [class]="toUseDeviceClass">{{"toUseDevice" | translate}}</span></button>
      <button mat-raised-button matBadge="{{deviceAbnormal}}" matBadgePosition="after" matBadgeColor="warn" (click)="switchTable('abnormalDevice')"><span [class]="abnormalDeviceClass">{{"abnormalDevice" | translate}}</span></button>
    </mat-grid-tile>
  </mat-grid-list>
</div>

<div [class]="getBgClass()">
<div *ngIf="showPersonDetails" class="person-grid-list">
  <mat-grid-list cols="1" rowHeight="400px">
    <mat-grid-tile>
      <app-cobject [person]="person" (hide)="hidePerson()"></app-cobject>
    </mat-grid-tile>
  </mat-grid-list>
</div>
  <div [class]="getBandClass()">
    <div *ngIf="showPersonBandDetails" class="person-grid-list">
      <mat-grid-list cols="1" rowHeight="800px">
        <mat-grid-tile>
          <app-bandobject [person]="person" (hide)="hidePersonBand()"></app-bandobject>
        </mat-grid-tile>
      </mat-grid-list>
    </div>
<div *ngIf="showPersons()" [class]="getListClass()">
  <div class="wdl-loading-shade" *ngIf="showLoadingFlag">
    <mat-spinner *ngIf="showLoadingFlag"></mat-spinner>
  </div>

  <div class="wdl-table-container">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <ng-container matColumnDef="number">
        <th mat-header-cell *matHeaderCellDef>{{"number" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.number}}</td>
      </ng-container>

      <ng-container matColumnDef="personName">
        <th mat-header-cell *matHeaderCellDef>{{"name" | translate}}</th>
        <td mat-cell *matCellDef="let element">
          <div style="cursor: pointer;" (click)="openMonitor(element)" matTooltip="{{'openMonitor' | translate}}">{{element.personName}}</div>
        </td>
      </ng-container>

      <ng-container matColumnDef="building">
        <th mat-header-cell *matHeaderCellDef>{{"building" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.building}}</td>
      </ng-container>

      <ng-container matColumnDef="level">
        <th mat-header-cell *matHeaderCellDef>{{"level" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.level}}</td>
      </ng-container>

      <ng-container matColumnDef="room">
        <th mat-header-cell *matHeaderCellDef>{{"room" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.room}}</td>
      </ng-container>

      <ng-container matColumnDef="bed">
        <th mat-header-cell *matHeaderCellDef>{{"bed" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.bed}}</td>
      </ng-container>

      <ng-container matColumnDef="device1Id">
        <th mat-header-cell *matHeaderCellDef>{{"device1Id" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.device1Id}}</td>
      </ng-container>

      <ng-container matColumnDef="device2Id">
        <th mat-header-cell *matHeaderCellDef>{{"device2Id" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.device2Id}}</td>
      </ng-container>

      <ng-container matColumnDef="nurseName">
        <th mat-header-cell *matHeaderCellDef>{{"nurse" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.nurseName}}</td>
      </ng-container>

      <ng-container matColumnDef="state">
        <th mat-header-cell *matHeaderCellDef>{{"state" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{getAlarmText(element)}}</td>
      </ng-container>

      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element">
          <button mat-icon-button (click)="openMonitor(element)" matTooltip="{{'openMonitor' | translate}}">
            <mat-icon svgIcon="show" style="color: darkblue;"></mat-icon>
          </button>
          <button mat-icon-button (click)="openBandMonitor(element)" matTooltip="{{'openBandMonitor' | translate}}">
            <mat-icon svgIcon="showband" style="color: darkblue;"></mat-icon>
          </button>
          <button mat-icon-button (click)="openHist(element)" matTooltip="{{'openHist' | translate}}">
            <mat-icon svgIcon="hist" style="color: darkblue;"></mat-icon>
          </button>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
</div>

<div *ngIf="showDevices()" class="wdl-container mat-elevation-z8">
  <div class="wdl-loading-shade" *ngIf="showLoadingFlag">
    <mat-spinner *ngIf="showLoadingFlag"></mat-spinner>
  </div>

  <div class="wdl-table-container">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <ng-container matColumnDef="number">
        <th mat-header-cell *matHeaderCellDef>{{"number" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.number}}</td>
      </ng-container>

      <ng-container matColumnDef="deviceId">
        <th mat-header-cell *matHeaderCellDef>{{"deviceId" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.deviceId}}</td>
      </ng-container>

      <ng-container matColumnDef="personName">
        <th mat-header-cell *matHeaderCellDef>{{"bind" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.personName}}</td>
      </ng-container>

      <ng-container matColumnDef="updateTime">
        <th mat-header-cell *matHeaderCellDef>{{"updateTime" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{(element.updateTime === 0) ? '-' :  (element.updateTime | date: 'yyyy-MM-dd HH:mm:ss')}}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumnsDevice; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumnsDevice;"></tr>
    </table>
  </div>
</div>
</div>
